<template>
	<div id="root">
		<div class="todo-container">
			<!-- 注意父给子传递一个方法操纵修改父组件的数组 -->
			<div class="todo-wrap">
	             <!-- 把添加方法传给子对象，子对象调用父对象的添加方法给父对象的数组加值（子给父传值，也就是用父得方法操作父得数组） -->
				<MyHeader :addTodo="addTodo"/> 
				<!-- 把数组对象传给子对象,这里使用的是v-bind的方式绑定传值,字符串里面一般是一个表达式,会执行表达式再传给子组件 ；这里数组给子组件只是用于统计，不是修改，
				一般数组在哪个组件吗，操作修改数据的方法就在哪个组件-->
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
				<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>
<!-- 在 Vue 中，通过 props 将数据从父组件传递给子组件时，如果子组件直接修改这个传递的数组，会影响到父组件的数据。
如果你通过 props 传递的是一个基本类型的值（比如字符串、数字、布尔等），而不是引用类型（如数组或对象），那么在子组件中修改这个基本类型的值不会影响到父组件。 -->
<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'
    //数据在哪方法就在哪，用方法操作修改数据，把方法传递通信给其他组件使用。
	export default {
		name:'App',
		// 注册三个子组件
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyList组件和MyFooter组件都在使用，所以放在App中（状态提升，因为兄弟组件不能用props）,子组件需要就可以把父组件的传给子组件
				todos:[
					{id:'001',title:'抽烟',done:true},
					{id:'002',title:'喝酒',done:false},
					{id:'003',title:'开车',done:true}
				]
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
	}
</script>

<style>
	/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>
